在前幾十天，雖然已經可以透過 Vue 的基礎機制，把任務清單、統計列、篩選工具、主題與語言切換做出來，功能逐漸成形，畫面也能操作，但如果仔細檢查的話，就會發現父子元件之間的溝通方式還是不夠有規範，舉例來說，有的地方用字串，有的地方傳物件，甚至事件名稱也不一致，要是之後繼續擴展這個網站，日後維護一定會變成一場大災難，因此 Day 19 的核心，不在於新增功能，而是把我們的程式碼的溝通做統一。

基本上，現在在 TaskList.vue 當中，有三個主要事件：

1.新增任務：emit('add-task', { title })
2.勾選切換：emit('toggle-task', { id })
3.刪除任務：emit('delete-task', { id })

假如每個事件名稱都用「動作 + task」的組合，結構就會相對一致且比較直觀，事件傳出的也就不會是散落的字串，而是清楚的物件，例如 { id } 或 { title }，這樣未來就算擴充更多欄位，也比較能保持穩定。

在 Toolbar.vue 裡，則是處理篩選條件，父層讓其知道目前的篩選狀態，而當使用者點下按鈕，事件會回傳，這樣父層就能收到統一格式的物件。

在 Header.vue，因為它要顯示任務的統計資訊，所以父層會傳 props.stats（包含 total、done、active、rate）。同時它還要接收目前語言 props.locale，並在語言切換時，發出 emit('change-locale', { locale })。這樣父層就能正確更新 i18n 的狀態，整個介面的文字也才會切換成功。

最後，所有的事件都會被 App.vue 收集，負責更新資料，然後再透過 props 傳遞回去，這樣一來，每個子元件的職責都會變得很單純，不會出現「誰都能改誰」的混亂場景。

看似沒有「新功能」增加的一天，卻讓每個元件都能更精準理解彼此，不會雞同鴨講，這樣的基礎，會讓後續功能疊加時更容易、更安全，也讓程式碼更具備團隊合作的可讀性與可維護性，期待下一篇文章吧！
今天的畫面長這樣：